<template>
  <div class="home">

    <!-- 平台简介 -->
    <div class="home-footer">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>平台简介</span>
        </div>
        <div class="text item">
          前端采用Vue、Element UI、Layui、echarts数据分析
          后端采用Spring Boot + Mybatis
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>主要功能</span>
        </div>
        <div class="text item">
          宿管管理学生以及宿舍<br>
          学生可以报修登记以及对宿管打分
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>快捷入口</span>
        </div>
        <div>
          <el-button type="primary" v-for="button in routeList" :key="button.name" @click="goPage(button.router)">{{button.name}}</el-button>
        </div>
      </el-card>
    </div>
    <!-- 统计图 -->
    <div class="content">
      <div class="area" id="box1" style="width: 50%; height: 360px"></div>
      <div class="time-info" id='box13' style="width:50%;">
        <div id="charts" style="width: 100%; height: 360px"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { countAdmin, countStudnet, countDormitoryManager,countDor } from '@/api/api'
export default {
  data() {
    return {
      routeList: [{ name: '报修管理', router: '/repair' }, { name: '宿舍管理', router: '/dormitory' }, { name: '个人资料', router: '/private' }],
      adminNumber: 0,
      studentNumber: 0,
      DormitoryManagerNumber: 0,
      nameList:[],
      numberList:[],
    };
  },
  async mounted() {
    await this.getCountAdmin()
    await this.getCountStudnet()
    await this.getCountDormitoryManager()
    await this.getcountDor()
    this.initChartsArea()
    this.initChartsBar()
  },
  methods: { //折线图
    async getCountAdmin() {
      await countAdmin().then((result) => {
        console.log(result);
        this.adminNumber = result.data
      })
    },
    async getCountStudnet() {
      await countStudnet().then((result) => {
        console.log(result);
        this.studentNumber = result.data
      })
    },
    async getCountDormitoryManager() {
      await countDormitoryManager().then((result) => {
        console.log(result);
        this.DormitoryManagerNumber = result.data
      })
    },
    async getcountDor() {
      await countDor().then((result) => {
        console.log(result);
        this.numberList = result.data.numberList
        this.nameList = result.data.name
      })
    },
    goPage(router) {
      this.$router.push(router)
    },
    initChartsBar() {
      let charts = this.$echarts.init(document.getElementById("box1"));
      let option = {
        title: {
          text: '各宿舍人数统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            data: this.nameList,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '入住人数',
            type: 'bar',
            barWidth: '70%',
            // data: [10, 52, 200, 334, 390, 330, 220]
            data:this.numberList
          }
        ]
      }
      charts.setOption(option);
    },
    initChartsArea() {

      console.log(this.adminNumber);
      let charts = this.$echarts.init(document.getElementById("charts"));
      let option = {
        title: {
          text: '系统用户占比',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '用户名称',
            type: 'pie',
            radius: '70%',
            data: [
              { value: this.adminNumber, name: '超级管理员' },
              { value: this.studentNumber, name: '宿舍管理员' },
              { value: this.DormitoryManagerNumber, name: '学生用户' },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      charts.setOption(option);
    },
  },
};
</script>

<style lang='less' scoped>
@import url('../assets/css/paopao.css');
.home {
  margin: 10px;
  margin-top: 50px;
}
.header {
  display: flex;
  padding-right: 30px;
  .item {
    flex: 1;
    height: 100px;
    padding: 10px;
    background: #fff;
    border-radius: 10px;
    margin-left: 20px;
    margin-right: 20px;
    font-weight: bold;
    color: #fff;
    // text-align: center;
    position: relative;
    .num {
      font-size: 22px;
      margin: 10px;
      color: #fff;
    }
    .bottom {
      position: absolute;
      border-top: 1px solid rgb(246, 245, 245);
      padding: 10px 20px;
      bottom: 0;
      right: 0;
      left: 0;
      color: #fff;
      font-weight: normal;
    }
  }
  .item:nth-child(1) {
    background-image: linear-gradient(#df887d, #88554d);
  }
  .item:nth-child(2) {
    background-image: linear-gradient(#409eff, #2e556e);
  }
  .item:nth-child(3) {
    background-image: linear-gradient(#b54fa8, #713c7a);
  }
  .item:nth-child(4) {
    background-image: linear-gradient(#1cd2f1, #39717a);
  }
}
.content {
  margin: 20px;
  display: flex;
  height: 400px;
  .time-info {
    flex: 2;
    background: #fff;
    margin-right: 20px;
    padding: 10px;
  }
  .area {
    flex: 1;
    background: #fff;
    padding: 10px;
  }
}
.home-footer {
  display: flex;
  padding-left: 20px;
  margin-bottom: 20px;
  .box-card {
    flex: 1;
    margin-right: 30px;
    span {
      font-weight: 600;
    }
  }
}
</style>